<div class="inner">
  <vde-property label="Text" type="expr-str" item="mark" property="textFormula"
                ng-model="mark.properties.textFormulaHtml" style="full"></vde-property>

  <h4>Font</h4>

  <vde-property label="Size" type="number" item="mark" property="fontSize"
                ng-model="mark.properties.fontSize.value"
                scale="mark.properties.fontSize.scale"
                field="mark.properties.fontSize.field"
                can-drop-style="left" style="half"></vde-property>


  <vde-property label="Family" type="select" options="gMdl.fonts" item="mark"
                property="font" ng-model="mark.properties.font.value"
                scale="mark.properties.font.scale" can-drop-style="left"
                field="mark.properties.font.field" style="half"></vde-property>

  <br clear="all" />

  <vde-property label="Weight" item="mark" property="fontWeight"
                ng-model="mark.properties.fontWeight.value"
                scale="mark.properties.fontWeight.scale" can-drop-style="left"
                field="mark.properties.fontWeight.field" style="half">
    <a ng-hide="mark.properties.fontWeight.scale || mark.properties.fontWeight.field" class="btn btn-mini" ng-click="toggleProp('fontWeight', 'bold')" ng-class="{'btn-info': mark.properties.fontWeight.value == 'bold'}"><i class="icon-bold"></i></a>
  </vde-property>

  <vde-property label="Style" item="mark" property="fontStyle"
                ng-model="mark.properties.fontStyle.value"
                scale="mark.properties.fontStyle.scale" can-drop-style="left"
                field="mark.properties.fontStyle.field" style="half">
    <a ng-hide="mark.properties.fontStyle.scale || mark.properties.fontStyle.field" class="btn btn-mini" ng-click="toggleProp('fontStyle', 'italic')" ng-class="{'btn-info': mark.properties.fontStyle.value == 'italic'}"><i class="icon-italic"></i></a>
  </vde-property>

  <br clear="all" />

  <vde-property label="Color" type="color" item="mark" property="fill"
                ng-model="mark.properties.fill.value"
                scale="mark.properties.fill.scale" can-drop-style="left"
                field="mark.properties.fill.field" style="full"></vde-property>

  <div ng-show="!mark.connectedTo.host">
    <h4>Position</h4>

    <vde-property label="X" type="number" item="mark" property="x"
                  ng-model="mark.properties.x.value" can-drop-style="left"
                  scale="mark.properties.x.scale" style="half"
                  field="mark.properties.x.field"></vde-property>

    <vde-property label="Y" type="number" item="mark" property="y"
                  ng-model="mark.properties.y.value" can-drop-style="left"
                  scale="mark.properties.y.scale" style="half"
                  field="mark.properties.y.field"></vde-property>
  </div>

  <h4>Offset</h4>

  <vde-property label="X" type="number" item="mark" property="dx"
                ng-model="mark.properties.dx.offset" can-drop-style="left"
                scale="mark.properties.dx.scale" style="half"
                field="mark.properties.dx.field"></vde-property>

  <vde-property label="Y" type="number" item="mark" property="dy"
                ng-model="mark.properties.dy.offset" can-drop-style="left"
                scale="mark.properties.dy.scale" style="half"
                field="mark.properties.dy.field"></vde-property>

  <h4>Align</h4>

  <vde-property label="Horizontal" item="mark" can-drop-style="left" style="half"
                scale="mark.properties.align.scale" field="mark.properties.align.field">
    <div class="btn-toolbar" ng-hide="mark.properties.align.scale || mark.properties.align.field">
      <div class="btn-group">
        <a class="btn-mini btn" href="#"
           ng-click="toggleProp('align', 'left');"
           ng-class="{'btn-info': mark.properties.align.value == 'left'}"><i class="icon-align-left"></i></a>
        <a class="btn-mini btn" href="#"
           ng-click="toggleProp('align', 'center');"
           ng-class="{'btn-info': mark.properties.align.value == 'center'}"><i class="icon-align-center"></i></a>
        <a class="btn-mini btn" href="#"
           ng-click="toggleProp('align', 'right');"
           ng-class="{'btn-info': mark.properties.align.value == 'right'}"><i class="icon-align-right"></i></a>
      </div>
    </div>
  </vde-property>

  <vde-property label="Vertical" item="mark" can-drop-style="left" style="half"
                scale="mark.properties.baseline.scale" field="mark.properties.baseline.field">
    <div class="btn-toolbar" ng-hide="mark.properties.baseline.scale || mark.properties.baseline.field">
      <div class="btn-group">
        <a class="btn-mini btn" href="#"
           ng-click="toggleProp('baseline', 'top');"
           ng-class="{'btn-info': mark.properties.baseline.value == 'top'}"><i class="icon-baseline-top"></i></a>
        <a class="btn-mini btn" href="#"
           ng-click="toggleProp('baseline', 'middle');"
           ng-class="{'btn-info': mark.properties.baseline.value == 'middle'}"><i class="icon-baseline-middle"></i></a>
        <a class="btn-mini btn" href="#"
           ng-click="toggleProp('baseline', 'bottom');"
           ng-class="{'btn-info': mark.properties.baseline.value == 'bottom'}"><i class="icon-baseline-bottom"></i></a>
      </div>
    </div>
  </vde-property>

  <vde-property label="Angle" type="number" item="mark" property="angle"
                ng-model="mark.properties.angle.value" can-drop-style="left"
                scale="mark.properties.angle.scale" style="half"
                field="mark.properties.angle.field"></vde-property>

  <br clear="all" />
</div>
